<template>
  <el-select
    v-model="$attrs.value"
    style="width: 100%"
    clear="carrier-select"
    filterable
    :disabled="disabled"
    @change="changeSelect"
    placeholder="请选择承运方名称"
  >
    <el-option
      v-for="item in carrierOptions"
      :key="item.carrierId"
      :label="item.name"
      :value="item.carrierId"
    >
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <span
          >{{ item.type === 0 ? `线下承运方` : `线上承运方` }}：{{
            item.name
          }}</span
        >
      </div>
    </el-option>
  </el-select>
</template>

<script>
import customerApi from "@/api/modules/customer";
import { mapState } from "vuex";

export default {
  name: "carrier",
  data() {
    return {
      value: "",
      carrierOptions: [],
      params: {
        page: 1,
        size: 999999,
        sort: [{ name: "createAt", asc: false }],

        type: [0, 1],
        status: [1, 3]
      }
    };
  },
  computed: {
    ...mapState({
      operStatus: (state) => state.form.operStatus
    }),
    disabled() {
      return this.operStatus === "edit" ? true : false;
    }
  },
  mounted() {
    this.getCarrierData();
  },
  methods: {
    async getCarrierData() {
      let { code, data } = await customerApi.carrierName(this.params);
      if (code !== 0 || !data) return;
      this.carrierOptions = data.records;
    },
    changeSelect(value) {
      this.$emit("input", value);
    }
  }
};
</script>

<style scoped lang="scss"></style>
